<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive 3D Panel Layout" />
<meta name="keywords" content="responsive, css3, jquery, plugin, layout, web development, 3D" />
<meta name="author" content="Codrops" />

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/sdsway2_style.css"/>

<!-- JavaScript -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="js/screen.js" charset="utf-8"></script>

<!-- for Presentation S-->
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Advent+Pro:100,500' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/modernizr.custom.69142.js"></script> 
<noscript>
	<link rel="stylesheet" type="text/css" href="css/nojs.css" />
</noscript>
<!-- for Presentation E-->
 
<title>Screen</title>
</head>
<body>
	<div id="inputHiddenDiv" style="display:none;">
		<input type="hidden" id="hiddenPollId" name="hiddenPollId" value="" />
		<input type="hidden" id="hiddenQstTypeCd" name="hiddenQstTypeCd" value="" />
	</div>
	<table class="pollMainTable">
		<colgroup>
			<col width="" />
			<col width="200px" />		
		</colgroup>
		<tbody>
			<tr>
				<td id="pollMainTd" class="pollMainTd">
<%// SCREEN MAIN S ================================================== %>
	<div id="objPollDiv" style="display:none;">
		<table class="objPoll">
			<tr>
				<td colspan="2" class="objTitle" >
					<!-- 객관식 문제 -->
					<span id="objTitle"></span>
					<!-- 배점 -->
					<input type="hidden" id="optPoint1" value="0" />
					<input type="hidden" id="optPoint2" value="0" />
					<input type="hidden" id="optPoint3" value="0" />
					<input type="hidden" id="optPoint4" value="0" />
				</td>
			</tr>
			<tr>
				<td id="opt1" class="opt1">
				</td>
				<td id="opt2" class="opt2">
				</td>
			</tr>
			<tr>
				<td id="opt3" class="opt3">
				</td>
				<td id="opt4" class="opt4">
				</td>
			</tr>
		</table>
	</div>
	<div id="subPollDiv" style="display:none;">
		<table class="subPoll">
			<tr>
				<td colspan="2" class="subTitle" >
					<!-- 주관식 문제 -->
					<span id="subTitle" class="subTitle"></span><br/>
					스마트 폰으로 답을 입력 해 주세요!!
				</td>
			</tr>
		</table>
	</div>
	<div id="oxPollDiv" style="display:none;">
		<table class="oxPoll">
			<tr>
				<td colspan="2" class="oxTitle" >
					<!-- OX 문제 -->
					<span id="oxTitle"></span>
					<!-- 배점 -->
					<input type="hidden" id="oxOptPoint1" value="0" />
					<input type="hidden" id="oxOptPoint2" value="0" />
				</td>
			</tr>
			<tr>
				<td id="oxOpt1" class="oxOpt1">
				</td>
				<td id="oxOpt2" class="oxOpt2">
				</td>
			</tr>
		</table>
	</div>

	<div align="center" id="practiceDiv" style="display:none;">
		<table id="practiceTable" class="practice">
			<colgroup><col width="100%" /></colgroup>
			<tbody>
				<tr><td class="subTitle"><span id="practiceMessage" class="subTitle"></span><br/></td></tr>
			</tbody>
		</table>
		<table class="lastResultRankTable" class="lastResultRankTable" style="position:relative;">
			<colgroup>
				<col width="200px" />
				<col width="200px" />
				<col width="200px" />
			</colgroup>
			<thead>
				<tr>
					<td colspan="3" class="congratulationTop">
<!-- 						<label style="font-weight:bold; color:white; font-size:80px;">Congratulation!!</label> -->
					</td>
				</tr>
				<tr><td colspan="3">&nbsp;</td></tr>
			</thead>
			<tbody id="lastResultRank">
			</tbody>
			<tbody>
				<tr><td colspan="3">&nbsp;</td></tr>
				<tr>
					<td colspan="3" class="congratulationBottom">
<!-- 						<label style="font-weight:bold; color:white; font-size:80px;">FIVE</label> -->
					</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div id="youtubeDiv" style="display:none;">
		<iframe width="960" height="720" src="http://www.youtube.com/embed/Hf7hIuag8vo?rel=0" frameborder="0" allowfullscreen></iframe>
	</div>
	
	<% // 프레지 부분 %>
	<div id="preziDiv">
		<div  class="prezi-player">
			<style type="text/css" media="screen">.prezi-player { width: 550px; } .prezi-player-links { text-align: center; }</style>
			<object id="prezi_rxnlj4re4z41" name="prezi_rxnlj4re4z41" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
				<param name="movie" value="http://prezi.com/bin/preziloader.swf"/>
				<param name="allowfullscreen" value="true"/>
				<param name="allowFullScreenInteractive" value="true"/>
				<param name="allowscriptaccess" value="always"/>
				<param name="wmode" value="direct"/>
				<param name="bgcolor" value="#ffffff"/>
				<param name="flashvars" value="prezi_id=rxnlj4re4z41&amp;lock_to_path=0&amp;color=ffffff&amp;autoplay=no&amp;autohide_ctrls=0"/>
				<embed id="preziEmbed_rxnlj4re4z41" name="preziEmbed_rxnlj4re4z41" src="http://prezi.com/bin/preziloader.swf" type="application/x-shockwave-flash" 
					allowfullscreen="true" allowFullScreenInteractive="true" allowscriptaccess="always" width="500" height="400" bgcolor="#ffffff" 
					flashvars="prezi_id=rxnlj4re4z41&amp;lock_to_path=0&amp;color=ffffff&amp;autoplay=no&amp;autohide_ctrls=0"></embed>
			</object>
		</div>
	</div>
	
	<div id="mainScreen">
<!-- 		<input type="button" onclick="getAllAvatar()" value="REFRESH"/> -->
<!-- 		<div id="avartarDiv" class="avatar"> -->
<!-- 			<img src="img/avartar1.gif"/> -->
<!-- 		</div> -->
	</div>
<%// SCREEN MAIN E ================================================== %>
				</td>
				<td id="rankInTd" class="rankInTd">
					<table id="rankTable" class="rankTable" style="height:100%;">
						<colgroup><col width="100%" /></colgroup>
						<tbody>
							<tr>
								<td style="height:600px; vertical-align:top;">
<%// RANK S ================================================== %>
									<table class="rankTable" style="position:relative;">
										<colgroup><col width="100%" /></colgroup>
										<thead>
											<tr>
												<td class="rankTitle">
<!-- 													<img alt="" src="img/diet_ranking_title.png" width="100%" height="100%"> -->
												</td>
											</tr>
										</thead>
										<tbody id="rank">
<!-- 				 							<tr><td class="rankBody"><span class="rankNum">1</span> <span class="rankUsrNm">김보건</span> <span class="rankScore">100</span></td></tr> -->
										</tbody>
									</table>
<%// RANK E ================================================== %>
								</td>
							</tr>
							<tr>
								<td align="center" style="height:100%; vertical-align:bottom;">
<%// SCORE S ================================================== %>
									<table id="scoreTable" class="rankTable">
										<colgroup><col width="100%" /></colgroup>
										<tbody>
											<tr>
												<td style="padding-bottom:20px; font-size:30pt; color:yellow; font-family:맑은 고딕;">
													<label>맞추면</label><br />
													<label id="scoreLabel" style="font-weight:bold;"></label><label>점!!</label>
												</td>
											</tr>
										</tbody>
									</table>
<%// SCORE E ================================================== %>
								</td>
							</tr>
						</tbody>
					</table>

				</td>
			</tr>
		</tbody>
	</table>
	
	<!--  Contents Div -->
	<div id="PtContentsDiv" class="container">		
		<ul id="sg-panel-container">
			<li data-w="100" data-h="100">
				<img title="" src="img/1.PNG" data-rotate-z="90" data-translate-z="700" />
			</li>
			<li data-w="100" data-h="100">
				<img title="" src="img/2.PNG" data-rotate-y="20" data-translate-y="700" />
			</li>
			<li data-w="100" data-h="100">
				<img title="" src="img/3.PNG" data-rotate-x="20" data-translate-x="700" />
			</li>
			<li data-w="100" data-h="100">
				<img title="" src="img/4.PNG" data-rotate-y="20" data-translate-z="700" />
			</li>
			<li data-w="100" data-h="100">
				<img title="" src="img/5.PNG" data-rotate-x="20" data-translate-z="700" />
			</li>
			<li data-w="100" data-h="100">
				<img title="" src="img/6.PNG" data-rotate-z="20" data-translate-x="700" />
			</li>
			<li data-w="100" data-h="100">
				<img title="" src="img/7.PNG" data-rotate-z="20" data-translate-y="700" />
			</li>
			<li data-w="100" data-h="100">
				<img title="" src="img/8.PNG" data-rotate-x="20" data-translate-y="700" />
			</li>
			<li data-w="100" data-h="100">
				<img title="" src="img/9.PNG" data-rotate-z="20" data-translate-z="700" />
			</li>
			<li data-w="100" data-h="100">
				<img title="" src="img/10.PNG" data-rotate-z="20" data-translate-z="700" />
			</li>
			<li data-w="100" data-h="100">
				<img title="" src="img/11.PNG" data-rotate-z="20" data-translate-z="700" />
			</li>
			<li data-w="100" data-h="100">
				<img title="" src="img/12.PNG" data-rotate-z="20" data-translate-z="700" />
			</li>
		</ul>
	</div>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.transit.min.js"></script>
	<script type="text/javascript" src="js/jquery.imagesloaded.js"></script>
	<script type="text/javascript" src="js/jquery.ba-dotimeout.min.js"></script>
	<script type="text/javascript" src="js/jquery.gridgallery.js"></script>
	<script type="text/javascript">	
		$(function() {
		
			$( '#sg-panel-container' ).gridgallery();
		
		});
	</script>

	<div id="hiddenDiv" style="display:none;">
		<div id="avatar_#ID#" class="avatar">
			<div id="balloon_#ID#" class="balloon"></div>
			<img src="img/avatar1.gif" style="width:50px; height:50px;" />
			<div class="avatarId">#ID#</div>
			<input type="hidden" id="hiddenAvatarId_#ID#" value="#ID#" />
		</div>
	</div>

</body>
</html>